import {
  useDebounce,
  useDebounceFn,
  useSetState,
  useThrottle,
  useThrottleFn,
  useTimeout,
  useUpdate,
  useUpdateEffect,
} from "ahooks";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

function AhooksComponent() {
  //   const [value, setValue] = useState(0);
  //   const { run } = useDebounceFn(
  //     () => {
  //       setValue(value + 1);
  //     },
  //     {
  //       wait: 500,
  //     }
  //   );

  //   return (
  //     <div>
  //       <p style={{ marginTop: 16 }}> Clicked count: {value} </p>
  //       <button type="button" onClick={run}>
  //         Click fast!
  //       </button>
  //     </div>
  //   );

  //   const [value, setValue] = useState(0);
  //   const { run } = useThrottleFn(
  //     () => {
  //       setValue(value + 1);
  //     },
  //     { wait: 500 }
  //   );

  //   return (
  //     <div>
  //       <p style={{ marginTop: 16 }}> Clicked count: {value} </p>
  //       <button type="button" onClick={run}>
  //         Click fast!
  //       </button>
  //     </div>
  //   );

  //   const [state, setState] = useSetState({
  //     name: "张三",
  //     age: 18,
  //   });
  //   useTimeout(() => {
  //     setState({
  //       age: 20,
  //     });
  //   }, 3000);

  //   return (
  //     <div>
  //       {state.name}
  //       {state.age}
  //     </div>
  //   );
  //   console.log('进入组件')
  //   const update = useUpdate();
  //   const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);
  //   const c = useRef(0)
  //   const handleIncrement = () => {
  //     setCount(count + 1);
  //   };
  //   const sum = useMemo(() => {
  //     return count + count2;
  //   }, [count, count2]);
  // 使用 useCallback 缓存事件处理函数
  //   const handleIncrement = useCallback(() => {
  //     setCount((prev) => prev + 1);
  //   }, []); // 依赖数组为空，表示这个函数在整个组件生命周期内不会重新创建
  useEffect(() => {
    console.log("进入组件");
  }, [count2]);
  useUpdateEffect(() => {
    console.log("进入组件2");
  }, [count2]);
  return (
    <div>
      {/* <h1>Count: {count}</h1>
      <h1>Count2: {count2}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={() => setCount2(count2 + 1)}>Increment 2</button>
      <button onClick={() => c.current = c.current + 1}>Increment 3</button>
      sum:{sum}
        <button onClick={update}>刷新组件</button> */}
      <button onClick={() => setCount2(count2 + 1)}>Increment 2</button>
    </div>
  );
}

export default AhooksComponent;
